import { type FC } from 'react';
import Markdown from 'react-markdown';
import 'github-markdown-css';
import { useMemoizedFn } from 'ahooks';
import Loading from '@/components/Loading';
import { usePrintText } from './hooks';
import type { TextNodeProps } from './types';

const TextPrint: FC<TextNodeProps> = (props) => {
  const {
    text,
    lastNode,
    prinit = true,
    prinitEnd = false,
    enableMarkdown
  } = props;

  const onPrintEnd = useMemoizedFn(() => {
    props.onPrintEnd?.(props.nodeIndex);
  });

  const [renderText, loading] = usePrintText({
    text,
    prinit,
    prinitEnd,
    isBreak: props.isBreak,
    onPrinit: props.onPrinit,
    onPrintEnd: onPrintEnd
  });

  return (
    <>
      <Markdown 
      className="markdown-body"
      >
        {renderText}
      </Markdown>
      {loading && lastNode && <Loading />}
    </>
  );
}

export default TextPrint;